<!-- 结果分析 -->
<template>
  <div class="carbon-analysis">
    <div class="go-home" @click="goHome">
      <el-button size="small" type="primary">返回导航页面</el-button>
    </div>
    <!-- 顶部导航 -->
    <div class="header">
      <div class="step-title"  :style="{ '--theme': theme }">Step 7: 结果分析</div>
      <el-button type="primary" @click="submitForm">下一步</el-button>
    </div>

    <!-- 主内容区 -->
    <div class="container">
      <!-- 左侧产品信息 -->
      <div class="product-info">
        <h4>产品碳足迹</h4>
        <div class="product-details">
          <div class="detail-item">
            <span class="label">材料名称：</span>
            <span class="value">大理石</span>
          </div>
          <div class="detail-item">
            <span class="label">规格参数：</span>
            <span class="value">标准规格</span>
          </div>
          <div class="detail-item">
            <span class="label">产品编号：</span>
            <span class="value">TY2024001</span>
          </div>
          <div class="detail-item">
            <span class="label">系统边界：</span>
            <span class="value">大门口</span>
          </div>
          <div class="detail-item">
            <span class="label">功能单位：</span>
            <span class="value">10piece</span>
          </div>
          <div class="detail-item">
            <span class="label">产品型号：</span>
            <span class="value">TY-2024001</span>
          </div>
          <div class="detail-item">
            <span class="label">生物质燃料碳排放量：</span>
            <span class="value">95.49kgCO₂</span>
          </div>
          <div class="detail-item">
            <span class="label">化石燃料碳排放量：</span>
            <span class="value">12700.84kgCO₂</span>
          </div>
          <div class="detail-item">
            <span class="label">土地使用碳排放量：</span>
            <span class="value">1.53kgCO₂</span>
          </div>
        </div>
        <div class="carbon-value" :style="{ '--theme': theme }">
          <div class="title">碳排放总量</div>
          <div class="value">12803.25 kgCO₂e</div>
        </div>
      </div>

      <!-- 右侧分析图表 -->
      <div class="analysis-charts">
        <!-- 环形图 -->
        <div class="chart-card">
          <div class="top-title">材料获取阶段分析</div>
          <div class="material-stats">
            <hoopChart :data="{}"></hoopChart>
          </div>
        </div>

        <!-- 材料碳排量分析 -->
        <div class="chart-card">
          <div class="top-title">
            <el-link
              @click="changeChart(1)"
              :class="{ activeStyle: processMarker == 1 }"
              class="cus-link"
              type="info"
              underline="never"
              >生产过程分析</el-link
            >
            <el-link
              @click="changeChart(2)"
              :class="{ activeStyle: processMarker == 2 }"
              class="cus-link"
              type="info"
              underline="never"
              >工序分析</el-link
            >
          </div>

          <div class="material-stats">
            <component :is="processComponent"></component>
            <!-- <hoopChart :data="{}"></hoopChart> -->
          </div>
        </div>

        <!-- 生产过程排放 -->
        <div class="chart-card">
          <h4>阶段分析</h4>
          <div class="process-emission">
            <div>
              <brChart></brChart>
            </div>
          </div>
        </div>

        <!-- 排放趋势图 -->
        <div class="chart-card">
          <!-- <h4>其他排放指标</h4> -->
          <div class="top-title">
            <el-link
              @click="changeAnalysisChart(1)"
              :class="{ activeStyle: processAnalysisMarker == 1 }"
              class="cus-link"
              type="info"
              underline="never"
              >材料分析</el-link
            >
            <el-link
              @click="changeAnalysisChart(2)"
              :class="{ activeStyle: processAnalysisMarker == 2 }"
              class="cus-link"
              type="info"
              underline="never"
              >详情分析</el-link
            >
          </div>


          <template v-if="processAnalysisMarker == 1">
            <div style="display: flex; justify-content: center">
              <hoopChart :data="{}"></hoopChart>
            </div>
  
            <div class="grid-layout">
              <div class="grid-item">
                <div class="grid-number">0</div>
                <div class="grid-label">直接原料</div>
              </div>
              <div class="grid-item">
                <div class="grid-number">0</div>
                <div class="grid-label">间接原料</div>
              </div>
              <div class="grid-item">
                <div class="grid-number">0</div>
                <div class="grid-label">设备耗材</div>
              </div>
              <div class="grid-item">
                <div class="grid-number">0</div>
                <div class="grid-label">包装材料</div>
              </div>
            </div>
          </template>
          <template v-else-if="processAnalysisMarker == 2">
            <lineEChart></lineEChart>
          </template>
        

        </div>
      </div>

      <!-- 底部图表 -->
      <div class="additional-charts">
        <div class="chart-card">
          <div class="top-header">
            <h4>碳排放趋势图</h4>

            <div class="top-link">
              <el-link
                @click="changeProcessChart(1)"
                class="cus-link"
                type="info"
                :class="{ activeStyle: processChartMarker == 1 }"
                >原材料运输过程分析</el-link
              >
              <el-link
                @click="changeProcessChart(2)"
                class="cus-link"
                :class="{ activeStyle: processChartMarker == 2 }"
                type="info"
                >产品运输过程分析</el-link
              >
            </div>
          </div>

          <div class="chart-container">
            <hoopChart :width="250" :height="250" :data="{}"></hoopChart>
          </div>
          <div class="chart-line-container">
            <lineEChart :height="250"></lineEChart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import hoopChart from "./echart/index.vue";
  import processAnalysis from "./echart/processAnalysis.vue";
  import lineEChart from "./echart/lineChart.vue";
  import brChart from "./echart/barChart.vue";
  import useSettingsStore from "@/store/modules/settings";
  const settingsStore = useSettingsStore();
  const emit = defineEmits(["goNav"]);
  // 图表引用
  const donutChart = ref(null);
  const produceChart = ref(null);
  const lineChart = ref(null);
  //1:生产过程分析；2:工序分析
  const processMarker = ref(1);
  //1:原材料运输过程分析；2:产品运输过程分析
  const processChartMarker = ref(1);

  //1:材料分析；2:详情分析
  const processAnalysisMarker = ref(1);
  //生产图表组件
  const processComponent = ref(hoopChart);
  onMounted(() => {
    // 初始化环形图
  });


  const changeChart = (type) => {
    processMarker.value = type;
    if (type === 1) {
      processComponent.value = hoopChart;
    } else if (type === 2) {
      processComponent.value = processAnalysis;
    }
  };

  const changeAnalysisChart = (type) => {
    processAnalysisMarker.value = type;
    if (type === 1) {
      // processComponent.value = hoopChart;
    } else if (type === 2) {
      // processComponent.value = processAnalysis;
    }
  };

  const changeProcessChart = (type) => {
    processChartMarker.value = type;
  };
  //返回导航页面
  const goHome = () => {
    emit("goNav");
  };
  const submitForm = () => {
    emit("saveToNextStep", "eight");
    console.log("提交表单");
  };
  const theme = computed(() => {
    return settingsStore.theme;
  });
</script>

<style lang="scss" scoped>
  .carbon-analysis {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
    .go-home {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .step-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--theme);
  }

  .container {
    display: flex;
    gap: 20px;
  }

  /* 左侧产品信息样式 */
  .product-info {
    flex: 1.5;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .product-details {
    margin-bottom: 20px;
  }

  .detail-item {
    display: flex;
    margin-bottom: 10px;
  }

  .label {
    color: #666;
    min-width: 80px;
  }

  .value {
    flex: 1;
  }

  .carbon-value {
    background-color: var(--theme);
    color: white;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
  }

  .title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  /* 右侧分析图表样式 */
  .analysis-charts {
    flex: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .chart-card {
    flex: 1;
    min-width: 300px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .top-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .top-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        .cus-link {
          cursor: pointer;
          font-size: 16px;
          font-weight: 600;
        }
        .activeStyle {
          text-decoration: underline;
          color: #5cc4a7;
        }
      }
    }
    .chart-container {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }
    .chart-line-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .top-title {
      display: flex;
      gap: 8px;
      margin: 16px 0;
      .cus-link {
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        //text-decoration: underline;
        //color: #5cc4a7;
      }

      .activeStyle {
        color: #5cc4a7;
        text-decoration: underline;
      }
    }
  }

  .material-stats {
    display: flex;
    gap: 20px;
  }

  .stat-item {
    flex: 1;
    text-align: center;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #4caf50;
  }

  .process-emission {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .process-item {
    display: flex;
    justify-content: space-between;
  }

  /* 底部图表样式 */
  .additional-charts {
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .grid-item {
    text-align: center;
    background: #f0f9f6;
    border-radius: 5px;
    .grid-label {
      color: #393939;
    }
  }

  .grid-number {
    font-size: 24px;
    font-weight: bold;
    color: #5cc4a7;
  }

  .data-table {
    margin-top: 20px;
  }
</style>
